<template>
  <div>
    <div class="content">
      <a-form @submit="handleSubmit" style="width:70%;margin:0px auto;" :form="form">
        <!-- 是 -->
        <a-form-item v-bind="formItemLayout" label="开通产品选择">
          <!-- <a-row>
            <a-col :span="24">
              <a-checkbox-group v-decorator="['checkbox',{ rules: [{
                            required: true, message: '请选择开通产品',
                            }]
                        }]" style="width: 100%;" :options="options" @change="checkboxChange" />
            </a-col>
          </a-row> -->
          <br />
          <!-- <a-checkbox-group v-model="values" @change="checkboxChange"> -->
          <a-checkbox-group v-decorator="[
          'productType',
          {
              rules: [{
              required: true, message: '请选择开通产品',
              }]
          }
          ]" @change="checkboxChange">
            <a-row class="w700" :gutter='8'>
              <a-col :span="4" class="title-sty">网关支付:</a-col>
              <a-col :span="6"><span v-for="item in feeConfigs.gateway_b2c" v-bind:key="item.transCode">
                <a-checkbox :value="item.transCode">{{ item.transName | transNamefilter }}
                </a-checkbox>
              </span></a-col>
              <a-col :span="10"><span v-for="item in feeConfigs.gateway_b2b" v-bind:key="item.transCode">
                  <a-checkbox :value="item.transCode">{{ item.transName | transNamefilter }}
                 </a-checkbox>
                </span></a-col>
            </a-row>
            <a-row class="w700">
              <a-col :span="4" class="title-sty">快捷支付:</a-col>
              <a-col><span v-for="item in feeConfigs.fastpay" v-bind:key="item.transCode">
                  <a-checkbox :value="item.transCode">{{ item.transName }}
                 </a-checkbox>
                </span></a-col>
            </a-row>
            <a-row class="w700">
              <a-col :span="4" class="title-sty">条码支付： </a-col>
              <a-col><span v-for="item in feeConfigs.qrcode" v-bind:key="item.transCode">
                  <a-checkbox :value="item.transCode">{{ item.transName }}
                </a-checkbox>
                </span></a-col>
            </a-row>
            <a-row class="w700">
              <a-col :span="4" class="title-sty">APP唤醒支付： </a-col>
              <a-col><span v-for="item in feeConfigs.app_notify" v-bind:key="item.transCode">
                  <a-checkbox :value="item.transCode">{{ item.transName }}&nbsp;&nbsp;
                   </a-checkbox>
                </span></a-col>
            </a-row>
            <a-row class="w700">
              <a-col :span="4" class="title-sty">服务窗支付:</a-col>
              <a-col><span v-for="item in feeConfigs.alipay_win" v-bind:key="item.transCode">
                  <a-checkbox :value="item.transCode">{{ item.transName }}
                    </a-checkbox>
                </span></a-col>
            </a-row>
            <a-row class="w700">
              <a-col :span="4" class="title-sty">代付:</a-col>
              <a-col><span v-for="item in feeConfigs.withdraw_api" v-bind:key="item.transCode">
                  <a-checkbox :value="item.transCode">{{ item.transName }}
                   </a-checkbox>
                </span></a-col>
            </a-row>
          </a-checkbox-group>


        </a-form-item>

        <a-form-item v-bind="formItemLayout" label="资金结算至">
          <a-radio-group v-decorator="[
                        'settleAccount',
                        {
                            rules: [{
                            required: true, message: '请选择资金结算至',
                            }],initialValue:'account'
                        }
                        ]" @change="onChange">
            <a-radio value="account">余额</a-radio>
            <a-radio value="bankcard">银行卡</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-row>
            <a-col :xs="{ span : 24 }" :sm="{ span:12,offset:7 }">
                <div style="margin-top:30px;">
                    <a-button class="submitButton" type="primary" html-type="submit">下一步</a-button>
                  </div>
            </a-col>
          </a-row>
      </a-form>
    </div>
  </div>
</template>
<script>
  import { message } from "ant-design-vue";
  import api from "@/common/api";
  import { error } from "util";
  import { fail } from "assert";
  import { locale } from "moment";
  export default {
    data() {
      return {
        selectOptions: [],
        options: [],
        product: "",
        useApi: true,
        docking: true,
        values: null,
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 6 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 15,offset:1 },
            md: { span: 12,offset:1 }
          }
        },
        feeConfigs: {}
      };
    },
    filters: {
    //   formatFeeTemplate: function (valueStr) {

    //     let value = JSON.parse(valueStr);

    //     if (!value) return '';
    //     let feeDesc = '';
    //     if (value.type == 'rate') {

    //       if (value.rate != null) {
    //         let rate1 = value.rate * 100;
    //         feeDesc = rate1 + "%";
    //       }

    //       if (value.amount) {

    //         let amount1 = value.amount / 100;
    //         feeDesc += amount1 + "元/笔";
    //       }
    //     } else if (value.type == "rate_cd") {

    //       feeDesc = "借记卡：" + value.rate.c * 100 + "%";
    //       feeDesc += ",";
    //       feeDesc += "贷记卡：" + value.rate.d * 100 + "%";

    //       if (value.amount != null) {

    //         feeDesc += ",";
    //         feeDesc += value.amount / 100 + "元/笔";

    //       }


    //     }
    //     return feeDesc;

    //   },
      transNamefilter(value) {
        return value.substring(4);
      }

    },
    beforeCreate() {
      this.form = this.$form.createForm(this);
    },
    created() {
      sessionStorage.setItem("docking", true);
    },
    mounted() {
      let goSpe = sessionStorage.getItem("goSpe")
      if(goSpe == 'true'){
        this.feeConfigs = JSON.parse(sessionStorage.getItem("product"));
      }else{
        console.log('push')
        this.$router.push('/userindex')
      }
    },
    methods: {
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
            // if (values.docking == "a") {
            //   this.useApi = true;
            // } else {
            //   this.useApi = false;
            // }
            console.log('values', values)
            const data = {
              settleAccount: values.settleAccount,
              selectOptions: this.selectOptions
            };
            api.SpeConfig(
              data,
              res => {
                console.log("res", res);
                if (res.code == 'OK') {
                  this.doNext(1);
                }

              },
              err => {
                console.log("res", res);
              }
            );

            console.log("Received values of form: ", values);

          }
        });
      },
      doNext(step) {
        console.log(step);
        var st = step + 1;
        this.$router.push("/SpeCustomer/step" + st);
      },
      onChange(e) {
        console.log("radio checked", e.target.value);
        if (e.target.value == "b") {
          this.docking = false;
          sessionStorage.setItem("docking", false);
        } else {
          this.docking = true;
          sessionStorage.setItem("docking", true);
        }
      },

      checkboxChange(checkedValues) {
        console.log("checked = ", checkedValues);
        console.log("values = ", this.values);
        let len = checkedValues.length;
        let checkDatas = [];
        if (len > 0) {
          for (var idx in checkedValues) {

            if (checkedValues[idx] != null) {

              let data = {
                transCode: checkedValues[idx],
              };
              checkDatas.push(data);
            }
          }
          this.selectOptions = checkDatas;
        }
        console.log("this.selectOptions", this.selectOptions);
        // console.log('value = ', this.value)

      },

      // checkboxChange1(checkedValues) {

      //   values

      //   console.log("checked = ", checkedValues);

      //   let data = {
      //     feeTemplateId: "1",
      //     transCode: "A",
      //     feeTemplate: "A",
      //     upChannel: "ALL",
      //     transName: this.options[i].transName
      //   };
      //   this.logProtocolAddRequests.push(data);
      //   console.log(this.logProtocolAddRequests);
      // }
    }
  };
</script>
<style lang="scss" scoped>
  .content {
    /* text-align: center */
    margin: 0 auto;
  }

  .card {
    margin-top: 50px;
  }

  .card .title {
    text-align: center;
    padding: 20px;
    font-size: 18px;
  }

  .btn-next {
    margin-top: 20px;
  }

  .btn-style {
    background: #ccc;
    border: 1px solid #ccc;
    color: #eee;
  }

  .ant-checkbox-group .ant-checkbox-group-item {
    width: 100%;
  }

  .w700 {
    width: 800px;
    margin-bottom: 14px;
  }
  .title-sty{
    padding-right: 30px!important;
  }
  .submitButton {
    width: 8vw;
  }
</style>